import React, { useState, useEffect } from 'react';
import { Table, DatePicker, Space, Card } from 'antd';
import axios from 'axios';
import moment from 'moment';

const { RangePicker } = DatePicker;

const OrderManagement = () => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
    },
    {
      title: '派单',
      dataIndex: 'dispatch',
      key: 'dispatch',
    },
    {
      title: '接待',
      dataIndex: 'receptionist',
      key: 'receptionist',
    },
    {
      title: '陪陪',
      dataIndex: 'companion',
      key: 'companion',
    },
    {
      title: '老板',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '类型',
      dataIndex: 'serviceType',
      key: 'serviceType',
    },
    {
      title: '时长',
      dataIndex: 'duration',
      key: 'duration',
    },
    {
      title: '总价',
      dataIndex: 'totalPrice',
      key: 'totalPrice',
    },
    {
      title: '团抽',
      dataIndex: 'groupCommission',
      key: 'groupCommission',
    },
    {
      title: '派抽',
      dataIndex: 'dispatchCommission',
      key: 'dispatchCommission',
    },
    {
      title: '接抽',
      dataIndex: 'receptionCommission',
      key: 'receptionCommission',
    },
    {
      title: '到手',
      dataIndex: 'finalAmount',
      key: 'finalAmount',
    },
    {
      title: '邀请人',
      dataIndex: 'inviter',
      key: 'inviter',
    },
    {
      title: '邀请人抽',
      dataIndex: 'inviterCommission',
      key: 'inviterCommission',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  const fetchOrders = async (startDate, endDate) => {
    setLoading(true);
    try {
      const response = await axios.get('/api/orders/range', {
        params: {
          start: startDate.format('YYYY-MM-DD'),
          end: endDate.format('YYYY-MM-DD'),
        },
      });
      setOrders(response.data);
    } catch (error) {
      console.error('获取订单数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleDateRangeChange = (dates) => {
    if (dates && dates.length === 2) {
      fetchOrders(dates[0], dates[1]);
    }
  };

  useEffect(() => {
    // 默认加载最近7天的数据
    const endDate = moment();
    const startDate = moment().subtract(7, 'days');
    fetchOrders(startDate, endDate);
  }, []);

  return (
    <Card title="订单管理">
      <Space direction="vertical" style={{ width: '100%' }}>
        <div style={{ marginBottom: 16 }}>
          <RangePicker onChange={handleDateRangeChange} />
        </div>
        <Table
          columns={columns}
          dataSource={orders}
          loading={loading}
          rowKey="orderNo"
          scroll={{ x: true }}
        />
      </Space>
    </Card>
  );
};

export default OrderManagement;